<template>
	<view class="position-relative" ref="filterMenu" id="filterMenu" :style="{ width: props.width + 'rpx' }">
		<!-- 静态菜单 -->
		<view :style="{ backgroundColor: props.color, height: props.height + 'rpx', width: props.width + 'rpx' }" class="flex align-center justify-center">
			<view
				v-if="isNaN(activeIndex) || isButton"
				@click="onClick(item, index)"
				:style="{ height: props.height + 'rpx', width: itemwidth + 'rpx' }"
				class="flex align-center justify-center"
				v-for="(item, index) in cachList"
				:key="index"
			>
				<text :style="{ fontSize: item.fontSize + 'rpx', color: activeIndex == index ? item.fontColor : item.unFontColor }">{{ item.text }}</text>
				<text class="ss-m-l-12 iconfont" :style="{ fontSize: item.fontSize - 12 + 'rpx', color: activeIndex == index ? item.fontColor : item.unFontColor }">
					{{ activeIndex == index ? item.icon : item.unIcon }}
				</text>
			</view>
		</view>

		<!-- 背景遮罩,透明背景 -->
		<view
			@click="close"
			@touchmove.stop="stopEvent"
			class="bg fixed"
			:style="{
				left: (isNaN(activeIndex) || isButton ? '-10000' : 0) + 'px',
				top: 0 + 'px',
				height: sysinfo.height + 'px',
				width: sysinfo.width + 'px',
				zIndex: 402
			}"
		></view>
		<!-- #ifdef H5 -->
		<teleport to="body">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
			<root-portal>
				<!-- #endif -->
				<!-- 动态菜单及内容的背景 -->
				<view
					@click="close"
					@touchmove.stop="stopEvent"
					:class="[isNaN(activeIndex) ? 'bgAnioff' : 'bgAni']"
					class="bgContent fixed"
					:style="{
						left: (isNaN(activeIndex) || isButton ? '-10000' : props.fixed ? 0 : el_left) + 'px',
						top: _fixed ? '0px' : el_top + 'px',
						width: props.width + 'rpx',
						height: sysinfo.height + el_top + 'px',
						zIndex: 402
					}"
				></view>
				<!-- 动态菜单及内容 -->
				<view
					@click="close"
					@touchmove.stop="stopEvent"
					class="content fixed"
					:style="{
						left: (isNaN(activeIndex) || isButton ? '-10000' : props.fixed ? 0 : el_left) + 'px',
						top: _fixed ? '0px' : el_top + 'px',
						width: props.width + 'rpx',
						height: sysinfo.height + el_top + 'px',
						zIndex: 402
					}"
				>
					<view :style="{ backgroundColor: props.color, height: props.height + 'rpx', props: props.width + 'rpx' }" class="flex align-center justify-center">
						<view
							@click="onClick(item, index)"
							:style="{ height: props.height + 'rpx', width: itemwidth + 'rpx' }"
							class="flex align-center justify-center"
							v-for="(item, index) in cachList"
							:key="index"
						>
							<text :style="{ fontSize: item.fontSize + 'rpx', color: activeIndex == index ? item.fontColor : item.unFontColor }">{{ item.text }}</text>
							<text class="ss-m-l-12 iconfont" :style="{ fontSize: item.fontSize - 12 + 'rpx', color: activeIndex == index ? item.fontColor : item.unFontColor }">
								{{ activeIndex == index ? item.icon : item.unIcon }}
							</text>
						</view>
					</view>
					<slot name="default"></slot>
				</view>
				<!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
			</root-portal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
		</teleport>
		<!-- #endif -->
	</view>
</template>
<script lang="ts" setup>
import { inject, computed, getCurrentInstance, nextTick, ref, onMounted, Ref, provide, toRaw, watch } from 'vue';

// #ifdef APP-PLUS-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
const proxy = getCurrentInstance()?.proxy ?? null;
const emits = defineEmits(['click', 'close', 'cancel', 'confirm', 'onButton', 'update:modelValue']);

const props = defineProps({
	width: {
		type: Number,
		default: 750
	},
	height: {
		type: Number,
		default: 70
	},
	color: {
		type: String,
		default: 'white'
	},
	activeColor: {
		type: String,
		default: 'primary'
	},
	modelValue: {
		type: Number,
		default: NaN
	},
	fixed: {
		type: Boolean,
		default: false
	}
});
const sysinfo = inject(
	'tmuiSysInfo',
	computed(() => {
		return {
			bottom: 0,
			height: 750,
			width: uni.upx2px(750),
			top: 0,
			isCustomHeader: false,
			sysinfo: null
		};
	})
);
//元件的位置
const el_left = ref(0);
const el_top = ref(0);

//缓存的节点数据.
const cachList = ref([]);
const itemwidth = computed(() => Math.ceil(props.width / (cachList.value.length || 1)));
const activeIndex = ref(props.modelValue);
const _fixed = computed(() => props.fixed);
const isButton = computed(() => {
	if (isNaN(activeIndex.value)) return false;
	let el = cachList.value[activeIndex.value];
	if (!el) return true;
	return el.isButton;
});
onMounted(() => {
	getDomRect();
});
function getDomRect() {
	// #ifdef APP-NVUE
	nextTick(function () {
		dom.getComponentRect(proxy.$refs.filterMenu, function (res: any) {
			if (!res?.size) {
				getDomRect();
				return;
			}
			el_left.value = res?.size.left;
			el_top.value = res?.size.top;
		});
	});
	// #endif
	// #ifndef APP-NVUE
	nextTick(() => {
		uni
			.createSelectorQuery()
			.in(proxy)
			.select('#filterMenu')
			.boundingClientRect()
			.exec(
				(
					result: Array<{
						id: string;
						left: number;
						height: number;
						right: number;
						top: number;
					}>
				) => {
					if (!result[0]) return;
					let el = result[0];
					el_left.value = el.left;
					el_top.value = el.top;
				}
			);
	});
	// #endif
}
watch(
	() => props.modelValue,
	() => {
		activeIndex.value = props.modelValue;
	}
);

function onClick(item, index: number) {
	if (activeIndex.value === index) {
		if (isButton.value) {
			emits('onButton', false, index);
		}
		activeIndex.value = NaN;
		emits('update:modelValue', NaN);
		emits('cancel');
		return;
	}
	activeIndex.value = index;
	emits('click', item, index);

	if (isButton.value) {
		emits('onButton', true, index);
	}

	emits('update:modelValue', index);
}
function close() {
	activeIndex.value = NaN;

	emits('close');
	emits('update:modelValue', NaN);
	emits('cancel');
}

function pushKey(arg) {
	let index = cachList.value.findIndex((el) => el.id == arg.id);
	if (index > -1) {
		cachList.value[index] = { ...arg };
	} else {
		cachList.value.push({ ...arg });
	}
}
function delKey(id: string | number) {
	let index = cachList.value.findIndex((el) => el.id == id);
	if (index > -1) {
		cachList.value.splice(index, 1);
	}
}
function stopEvent(e: any) {
	e?.preventDefault();
	e?.stopPropagation();
}
function filterConfirm() {
	activeIndex.value = NaN;
	emits('update:modelValue', NaN);
	emits('confirm', toRaw(cachList.value[activeIndex.value]), toRaw(activeIndex.value));
}
function filterCancel() {
	activeIndex.value = NaN;
	emits('update:modelValue', NaN);
	emits('cancel');
}
provide(
	'activeIndex',
	computed(() => activeIndex.value)
);
provide(
	'AllList',
	computed(() => cachList.value)
);
provide(
	'FilterMenuMaxHeight',
	computed(() => sysinfo.value.height + el_top.value)
);
defineExpose({
	FilterMenu: 'FilterMenu',
	pushKey,
	delKey,
	close,
	filterCancel,
	filterConfirm
});
</script>

<style scoped>
.fixed {
	position: fixed;
}
.business-menu {
	justify-content: space-around;
	background-color: #ebf4ff;
	border-radius: 40rpx;
	width: 200rpx;
	height: 66rpx;
	line-height: 66rpx;
	text-align: center;
}

.bg {
	background-color: rgba(122, 106, 106, 0);
	/* #ifndef APP-NVUE */
	/* backdrop-filter: blur(0px); */
	z-index: 50;
	/* #endif */
}

.bgContent {
	background-color: rgba(0, 0, 0, 0.35);
	/* #ifndef APP-NVUE */
	/* backdrop-filter: blur(5px); */
	z-index: 51;
	/* #endif */
	/* #ifdef APP-NVUE */
	opacity: 0.4;
	transition-delay: 100;
	transition-timing-function: linear;
	transition-property: transform;
	/* #endif */
}

.bgAni {
	/* #ifndef APP-NVUE */
	animation: bgcolorani 0.35s linear;
	/* #endif */
	/* #ifdef APP-NVUE */
	opacity: 1;
	/* #endif */
}

.bgAnioff {
	/* #ifdef APP-NVUE */
	opacity: 0.4;
	/* #endif */
}

.content {
	/* #ifndef APP-NVUE */
	z-index: 52;
	/* #endif */
}

/* #ifndef APP-NVUE */
@keyframes bgcolorani {
	0% {
		background-color: rgba(0, 0, 0, 0);
		/* backdrop-filter: blur(0px); */
	}

	100% {
		background-color: rgba(0, 0, 0, 0.35);
		/* backdrop-filter: blur(5px); */
	}
}

/* #endif */
</style>
